<template>
	<view class="big-box flex-col align-center"
		:style="{background: 'url('+`/static/images/starmap/private_map_bg-${isSelectMap}.png`+')  no-repeat center center / cover',backgroundSize:'cover'}">
		<!-- <top-navigation :isBack="false">

		</top-navigation> -->
		<view class="top-crystal justify-between" v-if="isSelectMap!=3" :style="{paddingTop:calculateStatusBar}">
			<view class="crystal-box"
				:style="{background: 'url('+`/static/images/starmap/crystal-num-bg${isSelectMap}.png`+')  no-repeat center center / 100% 100%',backgroundSize:'100% 100%'}">
				<image class="my-crystal" :src="`/static/images/starmap/my_crystal${isSelectMap}.png`" mode=""></image>
				<!-- 地图1跳转我的钻石 -->
				<view class="my-num" v-if="isSelectMap==1" @tap="$navto('/pages/mine/myOre/myOre')">
					<!-- {{kuangInfo.crystal}} -->
					<u-count-to :startVal="0" fontSize='28rpx' color='#FFF' bold :endVal="kuangInfo.crystal"
						:decimals="6"></u-count-to>
				</view>
				<view class="my-num justify-start align-center" v-if="isSelectMap==2" @tap.stop="selectTap">
					{{gather}}
					<image class="xiala" src="/static/images/starmap/xiala.svg" mode="widthFix"></image>
					<u-transition :show="isSelectShow">
						<view class="select-box flex-col justify-around align-center">
							<view class="gather-select" :style="{color:item.label==gather?'#FFF':'#FFFFFF99'}"
								v-for="item,index in collectList[0].slice(0,Number(kuangInfo.team_num) || 1)"
								:key="index" @tap.stop="selectGather(item)">
								{{item.label}}
							</view>
						</view>
					</u-transition>
				</view>
			</view>
			<!-- 地图修改 -->
			<view class="crystal-box" @tap="$navto('/pages/mine/myOre/oreLog')"
				:style="{background: 'url('+`/static/images/starmap/crystal-num-bg${isSelectMap}.png`+')  no-repeat center center / 100% 100%',backgroundSize:'100% 100%'}">
				<image class="my-crystal" :src="`/static/images/starmap/crystal_count${isSelectMap}.png`" mode="">
				</image>
				<!-- 已开采的钻石数量 -->
				<view class="my-num" v-if="isSelectMap==1">
					<u-count-to :startVal="0" fontSize='28rpx' color='#FFF' bold :endVal="kuangInfo.harvest"
						:decimals="6"></u-count-to>
					<!-- {{kuangInfo.harvest}} -->
				</view>
				<view class="my-num" v-if="isSelectMap==2">
					<u-count-to :startVal="0" fontSize='28rpx' color='#FFF' bold :endVal="kuangInfo.team_harvest || 0"
						:decimals="6"></u-count-to>
					<!-- {{kuangInfo.harvest}} -->
				</view>
			</view>
		</view>
		<!-- 第三张地图顶部 1-->
		<view class="top-crystal3 justify-between" v-if="isSelectMap==3" :style="{paddingTop:calculateStatusBar}">
			<view class="crystal-box3 align-center"
				:style="{background: 'url('+`/static/images/starmap/crystal-num-bg${isSelectMap-1}.png`+')  no-repeat center center / 100% 100%',backgroundSize:'100% 100%'}">
				<image class="my-crystal-l-3" :src="`/static/images/starmap/my_crystal${isSelectMap}.png`" mode="">
				</image>
				<view class="my-num3 DINPro-Bold justify-start align-center" @tap.stop="selectTap">
					{{mapName}}
					<!-- ({{kuangInfo.map_num || 0}}) -->
					<image class="xiala" src="/static/images/starmap/xiala.svg" mode="widthFix"></image>
					<u-transition :show="isSelectShow">
						<view  class="select-box3 flex-col justify-around align-center">
							<view class="gather-select" :style="{color:item.name==mapName?'#FFF':'#FFFFFF99'}"
								v-for="item,index in kuangInfo.type_list" :key="index"
								@tap.stop="selectGather(item,index)">
								{{item.name}}
							</view>
						</view>
					</u-transition>
				</view>
			</view>
			<!-- 右边 -->
			<view class="crystal-box-r3 justify-center align-center">
				<image class="my-crystal-r-3" :src="`/static/images/starmap/crystal_count${isSelectMap}.png`" mode="">
				</image>
				<view class="my-num-r3 justify-center align-center" @tap="addMap">
					{{'添加新地图'}}
				</view>
			</view>
		</view>
		<!-- 居中大地图 -->
		<!-- 问题 -->
		<view class="map1-box">
			<!-- #ifdef H5 -->
			<view class="path" id="path">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 490">

					<g>
						<title>Layer 1</title>
						<!-- <path transform="translate(507.99998118435565,294.0000460983287)" id="svg_3" d="m71.66668,64.99992c0,0 85.83332,-1.66667 8.33333,121.66665c-77.49999,123.33332 -8.33333,-121.66665 -8.33333,-121.66665z" opacity="NaN" stroke="#000" fill="#fff"/> -->
						<path id="svg_6" ref="svgPath"
							d="m110,425.49987c0,0 -44.16666,-52.49999 -44.16668,-52.99993c0.00002,0.49994 70.83334,-88.66672 70.83334,-88.66672c0,0 -69.16666,-83.33332 -69.16666,-83.33332c0,0 49.16666,-102.49999 49.16666,-102.49999c0,0 -33.33333,-45.83333 -33.33335,-46.33326"
							opacity="undefined" stroke="none" fill="none" />
					</g>
				</svg>
			</view>
			<!-- #endif -->
			<!-- 放在地图上的龙 有存在的龙采矿才显示-->
			<view v-for="(point, index) in points" :key="index"
				:style="{ transform: 'translate(' + point.x*getRatio + 'px, ' + point.y*getRatio + 'px)',top:LongStyle.top,left:LongStyle.left }"
				class="min-long-box flex-col justify-center align-center"
				v-if="kuangInfo.mineing_dragon_num!=0&&loading">
				<view class="efficiency">
					+{{point.efficiency}}
				</view>
				<image class="min-long" src="/static/images/starmap/min-long.png" mode="widthFix"></image>
				<view class="nickname">
					{{point.nickname}}
				</view>
			</view>
			<image class="map1" :src="`/static/images/starmap/map${isSelectMap}.png`" mode=""></image>
			<!-- 地图提示 没有龙 没放龙== -->
			<!-- '您暂时没有青龙',0
					'您暂未邀请好友',1
					'暂未开启',2
					'暂未放置青龙采集'3 -->
			<!-- 没龙 -->
			<view class="map-tips justify-center" v-if="loading&&isSelectMap==1&&!getIsHasLong">
				{{mapTipList[0]}}
			</view>
			<!-- 有龙有未放置的龙显示 并且采矿的龙==0-->
			<view class="map-tips justify-center"
				v-if="loading&&isSelectMap==1&&getIsHasLong&&kuangInfo.mineing_dragon_num==0">
				{{mapTipList[3]}}
			</view>
			<!-- 有龙 -->
			<view class="map-tips justify-center" v-if="loading&&isSelectMap==2&&(!kuangInfo.friends_total)">
				{{mapTipList[1]}}
			</view>
			<view class="map-tips justify-center"
				v-if="loading&&isSelectMap==3&&(Number(kuangInfo.map_num)<=0)&&isMapOpen==0">
				{{mapTipList[2]}}
			</view>

		</view>
		<!-- 问题end -->
		<view class="fixed-l">
			<view class="fixed-l-box flex-col justify-between">
				<image @tap="selectMap(1)" class="btn-l"
					:src="`/static/images/starmap/l-${isSelectMap==1?'a':''}btn-map1.png`" mode=""></image>
				<image @tap="selectMap(2)" class="btn-l"
					:src="`/static/images/starmap/l-${isSelectMap==2?'a':''}btn-map2.png`" mode=""></image>
				<image @tap="selectMap(3)" class="btn-l"
					:src="`/static/images/starmap/l-${isSelectMap==3?'a':''}btn-map3.png`" mode=""></image>
			</view>
		</view>
		<view class="fixed-r">
			<view class="fixed-r-box flex-col align-center justify-between">
				<!-- 黄色按钮 -->
				<view class="mb30 flex-col align-center" @tap="getCollection(Number(kuangInfo.mineing_dragon_num)>0)">
					<image class="btn-r" src="/static/images/starmap/btn_bg_r1.png" mode="widthFix"></image>
					<view class="duiwu" v-if="isSelectMap==1">
						{{Number(kuangInfo.mineing_dragon_num)>0?'正在采集':'未启动'}}
					</view>
					<view class="duiwu" v-if="isSelectMap==3">
						{{Number(kuangInfo.map_num)>0?'正在采集':'未启动'}}
					</view>
					<view class="btn-star-num" v-if="isSelectMap==3">
						<!-- 正在采集 -->
						{{Number(kuangInfo.map_num) || 0}}
					</view>
					<view class="btn-star-num" v-if="loading&&isSelectMap==1">
						<!-- 正在采集||空闲龙数量 -->
						{{Number(kuangInfo.mineing_dragon_num) || Number(kuangInfo.idle_dragon_num)}}
					</view>
					<!-- 采集队伍 -->
					<view class="duiwu" v-if="isSelectMap==2">
						{{gather}}
					</view>
					<view class="btn-star-num" v-if="isSelectMap==2">
						<!-- 队伍人数 -->
						{{kuangInfo.friends_total || 0}}
					</view>
				</view>
				<!-- 绿色按钮 -->
				<view class="mb30 flex-col align-center" v-if="isSelectMap!=2"
					@tap="getCollection(Number(kuangInfo.mineing_dragon_num)>0)">
					<image class="btn-r" src="/static/images/starmap/btn_bg-r2.png" mode="widthFix"></image>
					<view class="duiwu">
						{{isSelectMap==1?'每日采集':'日总采集'}}
					</view>
					<view class="btn-star-num">
						{{kuangInfo.day_max}}
						<!-- {{isSelectMap==3?getMax:getMax }} -->
					</view>
				</view>
				<!-- 钻石榜按钮 -->
				<!-- <image class="mb30 btn-r" src="/static/images/starmap/sjb-r3.png" mode="widthFix"
					@tap="$navto('/pages/star-map/crystalRanking?map='+isSelectMap)"></image> -->
				<!-- 玩法攻略按钮 -->
				<image v-if="!(isSelectMap==3&&(isMapOpen==0))" class="mb30 btn-r"
					src="/static/images/starmap/wfgl-r4png.png" mode="widthFix"
					@tap="$navto('/pages/star-map/paly-func?map='+isSelectMap)"></image>
				<!-- 购买潮卡 -->
				<!-- 	<image class="mb30 btn-r" src="/static/images/starmap/chaoka.png" mode="widthFix"
					v-if="loading&&isSelectMap==1&&getIsHasLong&&kuangInfo.idle_dragon_num!=0" @tap="calltap"></image> -->
				<image v-if="!(isSelectMap==3&&(isMapOpen==0))" class="mb30 btn-r"
					src="/static/images/starmap/chaoka.png" mode="widthFix" @tap="calltap">
				</image>
				<!-- 邀请组队 -->
				<image class="mb30 btn-r" src="/static/images/starmap/invite.png" mode="widthFix" v-if="isSelectMap==2"
					@tap="calltap('share')"></image>
				<!-- 空闲的青龙 -->
				<!-- <view class="mb30 flex-col align-center" v-if="kuangInfo.idle_dragon_num!=0&&(isSelectMap==1)"
					@tap="putTap">
					<image class="btn-r" src="/static/images/starmap/fang-long.png" mode="widthFix"></image>
					x{{kuangInfo.idle_dragon_num}}
				</view> -->
				<view class="mb30 flex-col align-center" v-if="isSelectMap==1" @tap="putTap">
					<image class="btn-r" src="/static/images/starmap/fang-long.png" mode="widthFix"></image>
					x{{kuangInfo.idle_dragon_num}}
				</view>
			</view>
		</view>
		<!-- 底部黄色按钮 -->
		<!-- buyBtnList: [
					'去购买山海经潮卡',
					'邀请好友组队挖矿',
					'放置青龙采集'
				], -->
		<!-- <view class="bottom-btn justify-center align-center" @tap="calltap" v-if="loading&&isSelectMap==2">
			{{buyBtnList[1]}}
			<view class="shadow">
			</view>
		</view> -->
		<!-- 购买山海经潮卡 -->
		<!-- <view class="bottom-btn justify-center align-center" @tap="calltap"
			v-if="loading&&isSelectMap==1&&!getIsHasLong || loading&&isSelectMap==1&&getIsHasLong&&kuangInfo.idle_dragon_num==0">
			{{buyBtnList[0]}}
			<view class="shadow">
			</view>
		</view> -->
		<!-- <view class="bottom-btn justify-center align-center" @tap="putTap"
			v-if="loading&&isSelectMap==1&&getIsHasLong&&kuangInfo.idle_dragon_num!=0">
			{{buyBtnList[2]}}
			<view class="shadow">
			</view>
		</view> -->
		<!-- 放置龙弹出层-->
		<modal-dragon :data='kuangInfo' :isShow='moneyShow' @close="moneyShow=false" @update='getIndex'></modal-dragon>
		<modal-sale :data='kuangInfo.goods' :isShow='buyShow' @close="buyShow=false" @update='getIndex'></modal-sale>
		<u-overlay :show="isSelectMap==3&&(isMapOpen==0)" :duration="400" :z-index="10" :opacity="0.3"></u-overlay>
		<u-overlay :show="isSelectShow" @click="isSelectShow=false" :duration="400" :z-index="11"
			:opacity="0.3"></u-overlay>
	</view>
</template>

<script>
	import {
		collectList
	} from '@/utils/constants.js'
	import {
		longPoints1,
		longPoints2,
		longPoints3,
	} from '@/utils/constants.js'
	import utils from '@/utils/uni-add.js';
	import modalDragon from './modal-dragon.vue'
	import modalSale from './modal-sale.vue'
	import topNavigation from '@/components/top-navigation/top-navigation.vue'
	export default {
		components: {
			// 注册组件
			topNavigation,
			modalDragon,
			modalSale
			// mine,
		},
		data() {
			return {
				// 地图三
				isMapOpen: 0,
				mapName: '',
				collectList,
				LongStyle: {
					top: '-74 rpx',
					left: '-40 rpx',
				},
				type: 1,
				kuangInfo: {
					idle_dragon_num: 0,
					mineing_dragon_num: 0,
				},
				longPoints1,
				longPoints2,
				longPoints3,
				moneyShow: false,
				isSelectShow: false,
				mapTipList: [
					'您暂时没有青龙',
					'您暂未邀请好友',
					'暂未开启',
					'暂未放置青龙采集'
				],
				buyBtnList: [
					'去购买山海经潮卡',
					'邀请好友组队挖矿',
					'放置青龙采集'
				],
				gather: '采集一队',
				isSelectMap: 1,
				value: 1,
				buyShow: false, //购买弹窗
				mapBg: '/static/images/starmap/private_map_bg-1.png',
				mapBgList: '/static/images/starmap/private_map_bg-1.png',
				imgSrc: 'url(/static/images/homes/background.png)',
				isHas: false, //没有放置
				loading: false,
				points: [], //点地址
				longShowNum: 5,

			}
		},
		created() {},
		mounted() {
			// this.getIndex()
			this.$emit('loadingEnd')
		},
		computed: {
			getIsHasLong() {
				// 空闲的龙和采集的龙同时为0的时候表示没有龙
				return this.kuangInfo.mineing_dragon_num == 0 && this.kuangInfo.idle_dragon_num == 0 ? false : true
			},
			calculateStatusBar() {
				return `calc(${this.statusHeight}px + 60rpx)`;
			},
			getRatio() {
				return this.widthRatio
			},
			getMax(e) {
				return parseFloat(this.kuangInfo.day_max).toFixed(2)
			}
		},
		methods: {
			calculatePoints() {
				let longNum = Number(this.kuangInfo.mineing_dragon_num) > 10 ? 10 : Number(this.kuangInfo
					.mineing_dragon_num)
				const path = this.$refs.svgPath;
				if (path) {
					const length = path.getTotalLength();
					console.log(length, 'length');
					for (let i = 0; i <= length; i += length / (longNum - 1)) { // numImages 是图片数量
						const point = path.getPointAtLength(i);
						this.points.push({
							x: point.x,
							y: point.y
						});
					}
					console.log(this.points, 'console.log(this.points);');
				}
			},
			getCollection(e) {
				if (this.isSelectMap == 1) {
					console.log(e, 'e');
					if (e) {
						// 正在采集
						this.$navto('/pages/star-map/collection-list')
					}
				} else if (this.isSelectMap == 2) {
					this.$navto('/pages/star-map/map2Collection/map2Collection?num=' + this.collectList[0].find(item =>
						item.label == this.gather).team + '&collectNum=' + this.kuangInfo.team_num)
				} else if (this.isSelectMap == 3) {
					this.$navto('/pages/star-map/highCollectionList/highCollectionList?num=' + this.type + '&collectNum=' +
						this.kuangInfo.team_num)
				}

			},
			async getIndex(ind,isMap = false) {
				if(isMap){
					this.isSelectMap = isMap
				}
				let url = '/api/v1/mineing'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					map:this.isSelectMap,
					team: this.collectList[0].find(item => item.label == this.gather).team,
					type: this.type

				})
				if (code == 200) {
					console.log(data, '静态资源');
					if (this.isSelectMap == 1) {
						this.LongStyle = {
							top: '-74 rpx',
							left: '-40 rpx',
						}
						this.loading = true
						this.kuangInfo = data
						let longNum = Number(this.kuangInfo.mineing_dragon_num) > this.longShowNum ? this.longShowNum :
							Number(this.kuangInfo.mineing_dragon_num)
						console.log(longNum, 'longNum');
						// longNum = 5
						this.points = this.longPoints1.slice(0, longNum).map((item, i) => {
							item.efficiency = this.kuangInfo.efficiency
							item.nickname = ''
							// item.nickname = ''+i
							return item
						})
						console.log(this.points, 'this.points');
					} else if (this.isSelectMap == 2) {
						this.LongStyle = {
							top: '-140rpx',
							left: '-60rpx'
						}
						this.loading = true
						this.kuangInfo = data
						let longNum = data.list.length > this.longShowNum ? this.longShowNum :
							data.list.length
						console.log(longNum, 'longNum2');
						// longNum = 5
						this.points = this.longPoints2.slice(0, longNum).map((item, index) => {
							item.efficiency = data.list[index].efficiency
							item.nickname = data.list[index].nickname
							return item
						})
					} else if (this.isSelectMap == 3) {
						
						this.LongStyle = {
							top: '-140rpx',
							left: '0rpx'
							// left: '-60rpx'
						}
						this.isMapOpen = data.open
						this.loading = true
						if (this.isMapOpen == 0) {
							this.kuangInfo = []
							this.mapName = '暂未开启(0)'
							this.points = []
						}
						this.kuangInfo = data
						if (ind) {
							this.mapName = data.type_list[ind].name
						} else {
							this.mapName = data.type_list[0].name
						}
						let longNum = Number(data.map_num) > this.longShowNum ? this.longShowNum :
							Number(data.map_num)
						console.log(longNum, 'longNum3');
						// longNum = 5
						this.points = this.longPoints3.slice(0, longNum).map((item, index) => {
							item.efficiency = data.efficiency
							item.nickname = ''
							return item
						})
					}

					// #ifdef H5
					// this.calculatePoints()
					// #endif
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			// 放置青龙
			putTap() {
				this.moneyShow = true
			},
			// 添加新地图
			addMap() {
				this.$navto('/pages/star-map/addHighMap')
			},
			selectTap() {
				this.isSelectShow = !this.isSelectShow
			},
			selectGather(i, ind) {
				if (this.isSelectMap == 2) {
					this.gather = this.collectList[0][i.team - 1].label
					console.log(i, 'iiiiiiiiiiiiiiiiii');
					this.isSelectShow = !this.isSelectShow
				} else if (this.isSelectMap == 3) {
					console.log(i, '3333333333333333333');
					this.type = i.type
					this.isSelectShow = !this.isSelectShow
				}
				this.getIndex(ind)
			},
			buyOpen() {

			},
			buyClose() {
				this.buyShow = false
			},
			calltap(e) {
				if (e == 'share') {
					this.$navto('/pages/mine/appCenter/share')
				} else {
					this.buyShow = true
				}
				// if (this.isSelectMap == 1) {
				// }
				// if (this.isSelectMap == 2) {
				// 	this.$navto('/pages/mine/appCenter/share')
				// }
			},
			selectMap(e) {
				this.loading = false
				this.isSelectMap = e
				this.getIndex()
			},
			withdraw() {
				utils.navto('/pages/home/withdraw/index', false, 1)
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		overflow: hidden;
		background-size: 100% 100%;
		height: calc(100vh - 120rpx);

		@keyframes slidein {


			0% {
				transform: translateY(-20%);
				opacity: 1;
			}

			100% {
				transform: translateY(-100%);
				opacity: 0;
			}
		}

		.map1-box {
			margin-top: 120rpx;
			position: relative;

			.path {
				position: absolute;
				width: 400rpx;
				height: 980rpx;
				z-index: 1;
			}

			.min-long-box {
				position: absolute;
				top: -74rpx;
				left: -40rpx;
				z-index: 101;

				.nickname {
					// font-weight: bold;
					font-size: 20rpx;
					color: #FFF;
				}

				.efficiency {
					position: absolute;
					top: -10rpx;
					font-weight: bold;
					font-size: 22rpx;
					color: #FFF;
					animation-duration: 1s;
					animation-name: slidein;
					animation-iteration-count: infinite;
				}
			}

			.min-long {
				margin-top: 10rpx;
				width: 80rpx;
			}

			.map-tips {
				white-space: nowrap;
				background: rgba(28, 31, 38, .8);
				color: rgba(255, 255, 255, .8);
				border-radius: 8rpx;
				padding: 14rpx 30rpx;
				font-size: 12px;
				font-weight: 300;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.map1 {
				width: 400rpx;
				height: 980rpx;
			}
		}

		.top-crystal {

			width: 100%;
			padding: 0rpx 70rpx 0;

			.crystal-box {
				width: 252rpx;
				height: 60rpx;
				position: relative;

				.my-num {
					position: absolute;
					top: 16rpx;
					left: 60rpx;
					font-size: 0.875rem;
					font-weight: 700;
					color: rgb(255, 255, 255);
					z-index: 101;

					.gather-select {
						padding: 25rpx 0;
						font-size: 26rpx;
					}

					.xiala {
						margin-left: 10rpx;
						width: 22rpx;
					}

					.select-box {
						padding: 24rpx 0;
						position: absolute;
						border-radius: 8rpx;
						top: 60rpx;
						left: 0;
						width: 4.25rem;
						background-color: #36394a;
						z-index: 102;

						&::before {
							content: '';
							position: absolute;
							top: -20rpx;
							right: 30rpx;
							width: 0;
							height: 0;
							border-top: .3125rem solid transparent;
							border-right: .3125rem solid transparent;
							border-left: .3125rem solid transparent;
							border-bottom: .3125rem solid #36394a;
						}
					}
				}
			}

			.my-crystal {
				transform: translate(-40%, 0);
				width: 86rpx;
				height: 86rpx;
			}
		}

		.top-crystal3 {

			width: 100%;
			padding: 0rpx 70rpx 0;

			.crystal-box3 {
				// width: 300rpx;
				min-width: 300rpx;
				height: 60rpx;
				position: relative;
				z-index: 12;

				.my-num3 {
					position: absolute;
					top: 16rpx;
					left: 70rpx;
					font-size: 0.875rem;
					color: rgb(255, 255, 255);
					z-index: 102;

					.xiala {
						// margin-left: 30rpx;
						width: 22rpx;
					}

					.select-box3 {
						padding: 24rpx 10rpx 24rpx 20rpx;
						position: absolute;
						border-radius: 8rpx;
						top: 60rpx;
						left: 0;
						width: 7.25rem;
						background-color: #36394a;
						z-index: 102;

						&::before {
							content: '';
							position: absolute;
							top: -20rpx;
							right: 30rpx;
							width: 0;
							height: 0;
							border-top: .3125rem solid transparent;
							border-right: .3125rem solid transparent;
							border-left: .3125rem solid transparent;
							border-bottom: .3125rem solid #36394a;
						}

						.gather-select {
							padding: 25rpx 0;
							font-size: 26rpx;
						}
					}
				}
			}

			.crystal-box-r3 {
				width: 6.4375rem;
				height: 60rpx;
				color: #9d5200;
				position: relative;
				background-color: #ca8200;
				border-radius: 3.75rem;
				box-shadow: 1px 2px 0 0 #ca8200;

				&::before {
					content: "";
					position: absolute;
					z-index: 1;
					top: -.125rem;
					left: 0;
					width: 100%;
					height: 1.9375rem;
					border-radius: 3.75rem;
					background: linear-gradient(180deg, #fec777 0%, #ffa500 100%);
					box-shadow: inset -0.125rem -0.0625rem 0.0625rem #f5be22, inset 0 0.1875rem 0.1875rem #ffed62;
				}

				.my-num-r3 {

					border-radius: 3.75rem;
					font-size: .75rem;
					font-weight: 700;
					z-index: 1;

					&::before {
						content: "";
						position: absolute;
						z-index: 1;
						top: -.0625rem;
						left: .4375rem;
						width: 6rem;
						height: 1.8125rem;
						border-radius: 3.75rem;
						background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
						box-shadow: 0 0 0.03125rem 0.03125rem rgba(255, 255, 255, .07);
						opacity: .5;
					}

					.xiala {
						margin-left: 30rpx;
						width: 22rpx;
					}
				}
			}

			.my-crystal-l-3 {
				transform: translate(-40%, 0);
				width: 90rpx;
				height: 90rpx;
			}

			.my-crystal-r-3 {
				z-index: 1;
				margin-right: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}

		// padding:0 30rpx;
		.left-slot {
			text-indent: 1em;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFF;
		}

		.bottom-btn {
			border-radius: 8rpx;
			margin: 40rpx 0 60rpx;
			font-weight: 700;
			font-size: 30rpx;
			position: relative;
			z-index: 102;
			position: fixed;
			bottom: 100rpx;
			width: 16.4375rem;
			height: 2.78125rem;
			color: #be6300;
			line-height: 2.78125rem;
			background: linear-gradient(180deg, #fec777 0%, #ffa500 100%);
		}

		.shadow {
			position: absolute;
			left: 0;
			bottom: -.3125rem;
			width: 100%;
			height: .40625rem;
			background-color: #855500;
			;
			border-radius: 0 0 8px 8px;
			border-top-left-radius: 0px;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 8px;
			border-bottom-left-radius: 8px;
			opacity: 1;
			z-index: 1;
		}

		.fixed-l {

			top: 420rpx;
			position: fixed;
			left: 30rpx;
			z-index: 11;

			.fixed-l-box {
				height: 450rpx;
			}
		}

		.fixed-r {

			top: 360rpx;
			position: fixed;
			right: 30rpx;
			z-index: 11;

			.fixed-r-box {
				color: #FFF;
				font-size: .625rem;

				.btn-star-num {
					position: absolute;
					top: 45%;
					transform: translate(0, -100%);
					font-size: 0.625rem;
					font-weight: normal;
					color: #23591e;
				}

				.duiwu {
					transform: translate(0, -30%);
				}
			}
		}

		.btn-l {
			height: 128rpx;
			width: 128rpx;
		}

		.btn-r {
			width: 100rpx;
		}





	}

	.minus {
		width: 22px;
		height: 22px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		// background-color: #FF0000;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>